<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-input v-model="params.name" style="width: 200px ; height: 40px" placeholder="请输入名字"></el-input>
      <el-input v-model="params.variety" style="width: 200px;height: 40px" placeholder="请输入品种"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 8px" @click="findBySearch()">搜索</el-button>
      <el-button type="primary" @click="clean()">清空</el-button>
        <el-button type="success" @click="add()">新增</el-button>
    </div>
    <div>
      <el-table
              :data="tableData"
              style="width: 100%">
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="variety" label="品种" width="120">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="120">
          </el-table-column>
          <el-table-column prop="chat" label="联系电话" width="120">
          </el-table-column>
          <el-table-column prop="species" label="种类" width="120">
          </el-table-column>
          <el-table-column prop="description" label="描述" width="120">
          </el-table-column>
          <el-table-column prop="status" label="领养状态" width="120">
          </el-table-column>
          <el-table-column label="操作">
              <!--绑定整条数据  -->
              <template slot-scope="scope">
                  <!-- 表示把当前这一行数据传给这个方法 -->
                  <el-button type="success" @click="edit(scope.row)" round>编辑</el-button>
                  <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.petId)">
                      <el-button slot="reference" type="danger" style="margin-left: 5px" round>删除</el-button>
                  </el-popconfirm>
              </template>
          </el-table-column>
      </el-table>
    </div>
      <div class="block" style="margin-top: 20px">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="params.pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="params.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
      </div>
      <div>
          <el-dialog title="请填写信息" :visible.sync="dialogAnimals" width="20%">
              <el-form :model="form">
                  <el-form-item label="姓名" width="50%">
                      <el-input v-model="form.name" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
                  <el-form-item label="种类" width="50%">
                      <template>
                          <el-radio v-model="form.species"label="狗">狗</el-radio>
                          <el-radio v-model="form.species" label="猫">猫</el-radio>
                      </template>
                  </el-form-item>
                  <el-form-item label="年龄" width="50%">
                      <el-input v-model="form.age" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
                  <el-form-item label="品种" width="50%">
                      <el-input v-model="form.variety" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
                  <el-form-item label="描述" width="50%">
                      <el-input v-model="form.description" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
                  <el-form-item label="地址" width="50%">
                      <el-input v-model="form.address" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
                  <el-form-item label="领养状态" width="50%">
                      <el-input v-model="form.status" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" width="50%">
                      <el-input v-model="form.chat" autocomplete="off" style="width: 85%"></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogAnimals = false" >取 消</el-button>
                  <el-button type="primary" @click="submit()">确 定</el-button>
              </div>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
    data() {
        return {
            params: {
                name: '',
                variety: '',
                pageNum: 1,
                pageSize: 10,
            },
            tableData: [],
            total: 0,
            dialogAnimals: false,
            form: {}


        }
    },
    created() {
        this.findBySearch();
    },
    methods: {
        findBySearch() {
            request.get("/Pet/search", {
                params: this.params
            }).then(res => {
                if (res.code === '0') {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
    add(){
            this.form={}
        this.dialogAnimals=true
    },
        clean(){
            this.params={
                name: '',
                variety: '',
                pageNum: 1,
                pageSize: 10
            }
            this.findBySearch();
        },
        handleSizeChange(pageSize){
            this.params.pageSize=pageSize
            this.findBySearch();
        },
        handleCurrentChange(pageNum){
            this.params.pageNum=pageNum
            this.findBySearch();
        },
        submit(){
            request.post("/Pet",this.form).then(res=>{
                if (res.code==='0'){
                    this.$message({
                        message:'操作成功',
                        type:'success'
                    });
                    this.dialogAnimals=false;
                    this.findBySearch();
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        edit(obj){
            this.form=obj;
            this.dialogAnimals=true;
            this.findBySearch();
        },
        del(petId){
            request.delete("/Pet/"+petId).then(res =>{
                if (res.code==='0'){
                    this.$message({
                        message:'删除成功',
                        type:'success'
                    })
                    this.findBySearch();
                }else{
                    this.$message({
                        message: res.msg,
                        type:'error'
                    });
                }
            });
        }
    }
}
</script>
